<template>
	<view class="order-detal" v-if="orderInfo">
		<!-- 支付顶部图片 -->
		<view class="order-banner">
			<view class="banner-item" v-if="parseInt(orderInfo.state) === 0">
				<view class="banner-text-2">
					<view>等待买家付款</view>
					<view>剩{{leftTime}}自动关闭</view>
				</view>
				<image src="https://www.innovationgloble.com/wxs/img/wx/order-banner1.png"></image>
			</view>
			<view class="banner-item banner-text" v-if="parseInt(orderInfo.state) === 1">
				<span>待使用</span>
				<image src="https://www.innovationgloble.com/wxs/img/wx/order-banner2.png"></image>
			</view>
			<view class="banner-item banner-text" v-if="parseInt(orderInfo.state) === 4"> 
				<span>已关闭</span>
				<image src="https://www.innovationgloble.com/wxs/img/wx/order-banner3.png"></image>
			</view>
			<view class="banner-item banner-text" v-if="parseInt(orderInfo.state) === 2">
				<span>待评价</span>
				<image src="https://www.innovationgloble.com/wxs/img/wx/order-banner4.png"></image>
			</view>
			<view class="banner-item banner-text" v-if="parseInt(orderInfo.state) === 3">
				<span>已取消</span>
				<image src="https://www.innovationgloble.com/wxs/img/wx/order-banner4.png"></image>
			</view>
		</view>
		<view class="order-content">
			<view class="order-price">
				<view class="order-price-top" @click="toDetails()">
					<view class="price-top-left">
						<view class="price-top-image">
							<image :src="orderInfo.expertImgAddrs"></image>
						</view>
					</view>
					<view class="price-top-right">
						<view class="price-title">{{orderInfo.title}}</view>
						<view class="price-num">
							<view class="price-num-l">
								<span class="num-l-sign">¥</span>
								{{orderInfo.actualPrice}}
								<span class="num-l-text">/次</span>
							</view>
							<view class="price-num-r">
								X{{orderInfo.mallNum}}
							</view>
						</view>
					</view>
				</view>
				<view class="price-info">
					<view class="price-info-1">
						<view>总额</view>
						<view>¥{{orderInfo.totalPrice}}</view>
					</view>
					<view class="price-info-1">
						<view>优惠</view>
						<view>¥0.00</view>
					</view>
					<view class="price-info-2">
						<view>实付款</view>
						<view>
							<span>¥</span>
							{{orderInfo.totalPrice}}
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="base-info">
				<view class="base-info-warp">
					<view class="base-info-1">
						订单信息
					</view>
					<view class="base-info-2">
						<view class="info-2-l">订单编号：</view>
						<view class="info-2-r">{{orderInfo.orderCode}}</view>
					</view>
					<view class="base-info-2">
						<view class="info-2-l">支付方式：</view>
						<view class="info-2-r">{{orderInfo.sceneTypeLable}}</view>
					</view>
					<view class="base-info-2">
						<view class="info-2-l">下单时间：</view>
						<view class="info-2-r">{{orderInfo.createDate}}</view>
					</view>
					<view class="base-info-2" v-if="parseInt(orderInfo.state) === 1||parseInt(orderInfo.state) === 2">
						<view class="info-2-l">支付时间：</view>
						<view class="info-2-r">{{orderInfo.payDate}}</view>
					</view>
				</view>
				<view class="chat-business" @click="goChat">
					<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/message.png"></image>
					联系商家
				</view>
			</view>
			<view class="consult-content">
				<view class="consult-title">
					咨询信息
				</view>
				<view class="consult-subtitle">
					咨询内容：
				</view>
				<view class="consult-text">
					{{detailList[0].note}}
				</view>
			</view>
			<view class="active-info">
				<view class="active-info-title">
					专家信息
				</view>
				<view class="active-info-warp">
					<view class="info-item">
						<view>专家姓名：</view>
						<view>{{mallInfo.real_name}}</view>
					</view>
					<view class="info-item">
						<view>职称/职务：</view>
						<view>{{mallInfo.job_title}}</view>
					</view>
					<view class="info-item">
						<view>研究领域：</view>
						<view>{{mallInfo.research_area_lable}}</view>
					</view>
					<view class="info-item">
						<view>研究方向：</view>
						<view>{{mallInfo.research}}</view>
					</view>
				</view>
			</view>
			<view class="bottom-line">
				<span>我是有底线的</span>
			</view>
			<!-- 待付款底部 -->
			<view class="order-bottom" v-if="parseInt(orderInfo.state) === 0">
				<button class="calcel" @click="caclelOrder">取消订单</button>
				<button class="pay" @click="goPay">立即支付</button>
			</view>
			<!-- 待使用底部 -->
			<view class="order-bottom" v-if="parseInt(orderInfo.state) === 1">
				<button class="calcel" @click="applyService">申请售后</button>
			</view>
			
			<!-- 已完成已取消已关闭底部 -->
			<view class="order-bottom" v-if="parseInt(orderInfo.state) === 2||parseInt(orderInfo.state) === 3||parseInt(orderInfo.state) === 4">
				<button class="after-sale" @click="toBuy">再次购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				baseUrl:this.$baseUrl,
				orderType:1,
				payState:1,
				id:'',
				detailList:{},
				mallInfo:{},
				orderInfo:null,
				expertDetail:{},
				agentData:'',
				t:'',
				leftTime:'',
			}
		},
		onLoad(option){
			this.id = option.id;
			this.loadOrderDetail(option.id)
		},
		onUnload(){
			this.t&&clearInterval(this.t);
		},
		computed:{
			...mapState('userStore', ['userInfo'])
		},
		methods: {
			...mapMutations('userStore', ['SetIsCancel','resetIsCancel']),
			//专家详情
			toDetails(){
				console.log(1)
				uni.navigateTo({
					url: '/pages/expert-detail/expert-detail?scene=' + this.mallInfo.expert_id
				});
			},
			//申请售后
			applyService(){
				uni.showToast({
					title:'敬请期待',
					icon:'none'
				})
			},
			//经纪人id
			getAgentId(id){
				let params = {
					mainId:id,
					type:1
				}
				this.$request.get({
					url:'agentJobs/selectDetailByMainId',
					data:params
				}).then(res=>{
					console.log('经纪人id',res)
					this.agentData = res;
					
				})
			},
			pay(orderInfo){
				const {nonceStr,sign,signType,timeStamp} = orderInfo;
				let _self = this;
				console.log("===order-detail-text====="+`/pagesA/chat-contactlist/fee-chat?userId=${_self.mallInfo.link_user_id || 85}&expertId=${_self.mallInfo.expert_id}&type=0&finished='true'`);
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: timeStamp,
				    nonceStr: nonceStr,
				    package: orderInfo.package,
				    signType:signType,
				    paySign: sign,
				    success: function (res) {
						_self.loadOrderDetail(_self.id)
						_self.SetIsCancel(true);
						uni.navigateTo({
							url: `/pagesA/chat-contactlist/fee-chat?userId=${_self.mallInfo.link_user_id || 85}&expertId=${_self.mallInfo.expert_id}&type=0&finished='true'`
						})
				    },
				    fail: function (err) {
				        console.log('fail:' + JSON.stringify(err));
				    }
				});
			},
			goPay(){
				let params = {orderCode:this.orderInfo.orderCode}
				this.$request.get({
					url:'payOrder/goPay',
					data:params
				}).then(res=>{
					console.log('支付',res)
					this.pay(res)
				})
			},
			//再次购买
			toBuy(){
				uni.navigateTo({
					url: `/pages/expert-detail/expert-detail?scene=${this.mallInfo.expert_id}`
				});
				// this.$request.get({
				// 	url: 'ExpertInfo/selectExperById',
				// 	data: {
				// 		expertId:this.mallInfo.expert_id
				// 	},
				// }).then(res => {
				// 	console.log("resExpert", res);
				// 	this.expertDetail = res;
				// 	uni.navigateTo({
				// 		url: `/pagesA/tel-consult/tel-consult?expertId=${this.mallInfo.expert_id}&linkUserId=${this.mallInfo.link_user_id}&realName=${this.mallInfo.full_name === 1 ? this.mallInfo.real_name.slice(0, 1) + '专家' : this.mallInfo.real_name}&headPortrait=${this.mallInfo.head_portrait}`
				// 	});
					
				// });
				
			},
			goChat(){
				if (!this.userInfo || !this.userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				uni.navigateTo({
					url: `/pagesA/chat-contactlist/chat?userId=${this.agentData?this.agentData.agent_info_id:85}&id=${this.orderInfo.id}&type=service&name=${this.orderInfo.title}&img=${this.orderInfo.expertImgAddrs}`
				})
			},
			//取消订单
			caclelOrder(){
				let params = {id:this.id}
				this.$request.get({
					url:'payOrder/cancelOrder',
					data:params
				}).then(res=>{
					console.log('取消订单',res)
					uni.showToast({
						title:'取消成功'
					})
					this.SetIsCancel(true);
					this.loadOrderDetail(this.id)
				})
			},
			//订单详情
			loadOrderDetail(id){
				let params = {id}
				this.$request.get({
					url:'payOrder/selectDetail',
					data:params
				}).then(res=>{
					console.log('订单详情',res)
					this.detailList = res.detailList;
					this.mallInfo = res.mallInfo;
					this.orderInfo = res.orderInfo;
					this.t = setInterval(()=>{
					   this.leftTime = this.remainTime(this.orderInfo.payDate)
					},1000)
					this.getAgentId(this.mallInfo.expert_id)
				})
			},
			remainTime (data) {
			    var nowtime = new Date(),  //获取当前时间
			        endtime = new Date(this.$moment(data));  //定义结束时间
			    var lefttime = 30 * 60 - (nowtime.getTime() - endtime.getTime()) / 1000;  //距离结束时间的毫秒数
			    if (lefttime <= 0) {
			        return '--';
			    }
			    const leftm = parseInt(lefttime / 60); //计算分钟数
			    const lefts = parseInt(lefttime - leftm * 60);  //计算秒数
			    return leftm + "分" + lefts + "秒";
			},
		}
	}
</script>

<style scoped lang="scss">
	.order-detal {
		min-height: 100vh;
		.order-content {
			background-color: #F5F6F9;
			padding-bottom: 110upx;
		}
		.order-banner {
			.banner-item {
				width: 100%;
				height: 200upx;
				position: relative;
				image {
					width: 100%;
					height: 200upx;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}
			}
			.banner-text-2 {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 71upx;
				>view:nth-child(1){
					font-size:32upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(255,255,255,1);
					line-height:45upx;
				}
				>view:nth-child(2){
					font-size:24upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(255,255,255,1);
					line-height:33upx;
				}
			}
			.banner-text {
               span {
				  font-size:32upx;
				  font-family:PingFangSC-Regular,PingFang SC;
				  font-weight:400;
				  color:rgba(255,255,255,1);
				  position: absolute;
				  top: 50%;
				  transform: translateY(-50%);
				  left: 71upx;
			   }
			}
		}
		.order-bottom {
			   position: fixed;
			   width:100%;
			   height:110upx;
			   background:rgba(255,255,255,1);
			   bottom: 0;
			   left: 0;
			   text-align: right;
			   padding: 14upx 9upx;
			   border-top: 1rpx solid #F2F2F2;
			   box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, 0.02);
			   .pay {
				   width:196upx;
				   height:82upx;
				   background:rgba(255,255,255,1);
				    border-radius:12upx;
				   border:1upx solid #2A7DFA;
				   line-height: 82upx;
				   font-size:26upx;
				   font-family:PingFangSC-Regular,PingFang SC;
				   font-weight:400;
				   color:#2A7DFA;
				   display: inline-block;
				   margin-right: 21upx;
			   }
			   .calcel {
				   width:196upx;
				   height:82upx;
				   background:#FFFFFF;
				   border-radius:12upx;
				   border:1upx solid #d5d5d5;
				   line-height: 82upx;
				   color: #333333;
				   font-size:26upx;
				   font-family:PingFangSC-Regular,PingFang SC;
				   font-weight:400;
				   color:rgba(78,78,78,1);
				   display: inline-block;
				   margin-right: 21upx;
			   }
			  .after-sale {
				 width:196upx;
				 height:82upx;
				 background:#2A7DFA;
				 border-radius:12upx;
				 line-height: 82upx;
				 font-size:26upx;
				 font-family:PingFangSC-Regular,PingFang SC;
				 font-weight:400;
				 color:#FFFFFF;
				 display: inline-block;
				 margin-right: 21upx;
			  }
		}
		.order-price {
			background-color: #FFFFFF;
			padding: 23upx 30upx;
			margin-bottom: 16upx;
			.order-price-top {
				display: flex;
			    justify-content: space-between;
				padding: 27upx 0 32upx 0;
				border-bottom: 1upx solid #E1E1E1;
				.price-top-left {
					width:143upx;
					height:150upx;
					border-radius:6upx;
					margin-right: 48upx;
					margin-left: 41upx;
					.price-top-image {
						width:147upx;
						height:147upx;
						box-sizing: border-box;
						border-radius: 50%;
						padding: 6upx;
						background-color: #FFFFFF;
						box-shadow: 0 2upx 8upx 1upx rgba(0,0,0,.08);
						image {
							width:135upx;
							height:135upx;
							border-radius: 50%;
						}
					}
				}
				.price-top-right {
					flex: 1;
					justify-content: space-between;
					display: flex;
					flex-flow: column;
					.price-title {
						font-size:30upx;
						font-family:PingFangSC-Medium,PingFang SC;
						font-weight:500;
						color:rgba(34,34,34,1);
						overflow:hidden;			
						display:-webkit-box;					
						text-overflow:ellipsis;				
						-webkit-line-clamp:2; 	
						white-space:normal;
					}
					.price-num {
						display: flex;
						justify-content: space-between;
						.price-num-l {
							color: #333333;
							font-size: 28upx;
							.num-l-sign {
								font-size: 22upx;
								color: #333333;
							}
							.num-l-text {
								color: #333333;
								font-size: 24upx;
							}
						}
						.price-num-r {
							font-size:24upx;
							font-family:PingFangSC-Regular,PingFang SC;
							font-weight:400;
							color:rgba(169,169,169,1);
							line-height: 52upx;
						}
					}
				}
			}
			.price-info {
				padding-top: 32upx;
				.price-info-1 {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30upx;
					>view:nth-child(1){
						font-size:26upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(169,169,169,1);
						line-height: 26upx;
					}
					>view:nth-child(2){
						font-size:26upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(169,169,169,1);
						line-height: 26upx;
					 }
				}
				.price-info-2 {
					display: flex;
					justify-content: space-between;
					>view:nth-child(1){
						font-size:26upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
					}
					>view:nth-child(2){
						font-size:34upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(222,90,2,1);
						span {
							font-size: 26upx;
						}
					 }
				}
			}
		}
		.base-info {
			box-sizing: border-box;
			background-color: #FFFFFF;
			margin-bottom: 16upx;
			.base-info-warp {
			padding: 36upx 30upx 6upx 30upx;
			.base-info-1 {
				font-size:32upx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:32upx;
				margin-bottom: 36upx;
			}
			.base-info-2 {
				display: flex;
				margin-bottom: 30upx;
				.info-2-l {
					color: #757575;
					font-size: 26upx;
					line-height: 26upx;
				    margin-right: 6upx;
				}
				.info-2-r {
					color: #333333;
					font-size: 26upx;
					line-height: 26upx;
				}
			}
			.base-info-5 {
				height: 92upx;
				line-height: 92upx;
				border-top: 2upx solid #F4F4F4;
				text-align: center;
			 }
			}
			.chat-business {
				height: 93upx;
				line-height: 93upx;
				text-align: center;
				font-size: 28upx;
				color: #6D6D6D;
				border: 1upx solid #EEEFF0;
				image {
					width: 31upx;
					height: 30upx;
					margin-right: 15upx;
					vertical-align: middle;
				    display: inline-block;
					margin-bottom: 4upx;
					z-index: 999;
				}
			}
		}
		.sign-info {
			box-sizing: border-box;
			padding: 36upx 31upx 0 30upx;
			background-color: #FFFFFF;
			margin-bottom: 16upx;
			.sign-title {
				font-size:32upx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.sign-item {
				box-sizing: border-box;
				padding: 33upx 0 40upx 0;
				position: relative;
				.sign-num {
					width:30upx;
					height:30upx;
					background:rgba(108,167,255,1);
					border-radius: 50%;
					font-size:22upx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(255,255,255,1);
					text-align: center;
					line-height: 30upx;
					position: absolute;
					left: 5upx;
					top: 43upx;
				}
				.sign-cell {
					display: flex;
					>view:nth-child(1){
						width: 186upx;
						text-align: right;
						span {
							display: inline-block;
							font-size:26upx;
							font-family:PingFangSC-Regular,PingFang SC;
							font-weight:400;
							color:rgba(117,117,117,1);
						}
						.star {
							position: relative;
							&::after{
								content: '*';
								display: block;
								position: absolute;
								color: #FF4D4F;
								font-size: 26upx;
								left: -14upx;
								top: 0;
							}
						}
				        }
				    >view:nth-child(2){
						flex: 1;
						font-size:26upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
				    }
			}
			
		}
		.sign-item:nth-last-child(1){
			border-bottom: none;
		}
		.sign-bottom {
			border-bottom: 1upx solid #DDDDDD;
		}
		}
		.consult-content {
			margin-bottom: 16upx;
			background-color: #FFFFFF;
			padding: 36upx 30upx 26upx 30upx;
			.consult-title {
				font-size:32upx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:32upx;
				margin-bottom: 36upx;
			}
			.consult-subtitle {
				font-size:26upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(117,117,117,1);
				line-height: 26upx;
				margin-bottom: 22upx;
			}
			.consult-text {
				font-size:26upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
		}
		.active-info {
			box-sizing: border-box;
			padding: 36upx 30upx 6upx 30upx;
			background-color: #FFFFFF;
			.active-info-title {
				font-size:32upx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:32upx;
				margin-bottom: 32upx;
			}
			.active-info-warp {
				.info-item {
					display: flex;
					margin-bottom: 36upx;
					
					>view:nth-child(1){
						color: #757575;
						font-size: 26upx;
						white-space:nowrap;
					}
					>view:nth-child(2){
						color: #333333;
						font-size: 26upx;
					}
				}
			}
		}
		.bottom-line {
			line-height: 87upx;
			text-align: center;
			span {
				font-size:24upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(182,182,182,1);
				position: relative;
				&::before {
					content: '';
					display: block;
					position: absolute;
					width:115upx;
					height:1upx;
					background-color: #E0E0E0;
					top: 50%;
					transform: translateY(-50%);
					left: -153upx;
				}
				&::after {
					content: '';
					display: block;
					position: absolute;
					width:115upx;
					height:1upx;
					background-color: #E0E0E0;
					top: 50%;
					transform: translateY(-50%);
					right: -153upx;
				}
			}
		}
	}
</style>
